<script setup>
import api from '../api/brand_api.js'
import { ref, onMounted } from "vue";
import { ElMessageBox } from "element-plus";
import lodash from 'lodash'

// 表格数据
const tableData = ref([]);
// 总条数（分页用）
const total = ref(0);
// 弹窗显示状态
const editWinVisible = ref(false);
// 搜索和分页参数
const searchObj = ref({
  current: 1,
  limit: 10,
  brand_name: ''
});
// 新增/编辑的数据对象
const obj = ref({});

// 加载数据列表
const search = async () => {
  const params = { ...searchObj.value };
  // 处理空搜索条件，避免%%查询
  if (params.brand_name === '') delete params.brand_name;
  const res = await api.page(params);
  tableData.value = res.data;
  total.value = res.count;
};

// 页面加载时初始化数据
onMounted(async () => {
  search();
});

// 关闭弹窗并清空数据
const editCancel = () => {
  obj.value = {};
  editWinVisible.value = false;
};

// 分页-每页条数变化
const handleSizeChange = (val) => {
  searchObj.value.limit = val;
  search();
};

// 分页-当前页变化
const handleCurrentChange = (val) => {
  searchObj.value.current = val;
  search();
};

// 执行搜索
const handlerSearch = async () => {
  searchObj.value.current = 1; // 重置为第一页
  search();
};

// 打开新增弹窗
const handlerAdd = () => {
  obj.value = { brand_name: '' }; // 初始化品牌名字段
  editWinVisible.value = true;
};

// 提交新增/编辑数据
const editCommit = async () => {
  // 验证品牌名不为空
  if (!obj.value.brand_name) {
    ElMessageBox.alert('品牌名不能为空', '提示', { type: 'warning' });
    return;
  }

  if (obj.value.id) {
    // 编辑操作（有id）
    await api.edit(obj.value);
  } else {
    // 新增操作（无id）
    await api.add(obj.value);
  }

  // 刷新数据并关闭弹窗
  searchObj.value.current = 1; // 重置为第一页
  search();
  editWinVisible.value = false;
};

// 打开编辑弹窗
const handleEdit = (index, row) => {
  obj.value = lodash.clone(row); // 克隆行数据（包含id）
  editWinVisible.value = true;
};

// 执行删除
const handleDelete = async (index, row) => {
  ElMessageBox.confirm(
      '真的要删除吗?',
      '删除提示',
      {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'error',
      }
  )
      .then(async () => {
        await api.del(row.id); // 等待删除完成
        searchObj.value.current = 1; // 重置为第一页
        search(); // 刷新数据
      })
      .catch(() => {
        // 取消删除不做处理
      });
};
</script>

<template>
  <!-- 搜索表单 -->
  <el-form :inline="true" :model="searchObj" class="demo-form-inline" style="margin-bottom: 10px;">
    <el-form-item label="品牌名">
      <el-input v-model="searchObj.brand_name" placeholder="请输入品牌名" clearable />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handlerSearch">查询</el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handlerAdd">新增</el-button>
    </el-form-item>
  </el-form>

  <!-- 数据表格 -->
  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="品牌" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.brand_name }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="处理按钮">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
          编辑
        </el-button>
        <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页组件 -->
  <el-pagination
      v-model:current-page="searchObj.current"
      v-model:page-size="searchObj.limit"
      :page-sizes="[10, 20, 30, 50]"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />

  <!-- 新增/编辑弹窗 -->
  <el-dialog
      v-model="editWinVisible"
      :title="obj.id ? '编辑品牌' : '新增品牌'"
      width="500"
  >
    <el-form :model="obj">
      <el-form-item label="品牌名" :label-width="100">
        <el-input v-model="obj.brand_name" autocomplete="off" />
      </el-form-item>
      <!-- 编辑时显示id（禁用），新增时隐藏 -->
      <el-form-item label="id" :label-width="100" v-if="obj.id">
        <el-input v-model="obj.id" autocomplete="off" disabled />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="editCancel">取消</el-button>
        <el-button type="primary" @click="editCommit">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped></style>